$(function () {
  const layer = layui.layer
  //由于服务器发送的参数比较多，所以定义一个查询的参数对象
  let q = {
    pagenum: 1,
    pagesize: 2,
    cate_id: '',
    state: '',
  }

  //1.获取文章列表数据 initTable()
  initTable()
  function initTable() {
    $.ajax({
      method: 'GET',
      url: '/my/article/list',
      data: q,
      success: function (res) {
        console.log(res)
        if (res.status !== 0) return layer.mas(res.message)

        //使用模板引擎渲染页面数据
        let htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
        //调用分页函数
        renderPage(res.total)
      },
    })
  }

  //
  //05.定义一个补零函数
  function padZero(n) {
    if (n < 10) {
      return '0' + n
    } else {
      return n
    }
  }

  //04.定义时间过滤器
  template.defaults.imports.dateFormat = function (dtStr) {
    var dt = new Date(dtStr)
    var y = dt.getFullYear()
    var m = dt.getMonth() + 1
    var d = dt.getDate()

    var hh = dt.getHours()
    var mm = dt.getMinutes()
    var ss = dt.getSeconds()

    y = padZero(y)
    m = padZero(m)
    d = padZero(d)

    mm = padZero(mm)
    hh = padZero(hh)
    ss = padZero(ss)
    return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
  }

  //3.获取文章列表的结构并渲染到select标签内
  initCate()
  function initCate() {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message)

        let htmlStr = template('tpl-cates', res)
        $('#cateId').html(htmlStr)
        //layui.form是不能动态渲染表单的，所以动态插入的结构+数据需要通过render（）重新渲染
        layui.form.render()
      },
    })
  }

  //3.筛选功能
  $('#form-search').on('submit', function (e) {
    e.preventDefault()
    //获取表单当中的取值（state / cate_id）
    let cate_id = $('#cateId').val()
    let state = $('#state').val()
    //给查询参数对象当中的属性进行重新赋值
    q.cate_id = cate_id
    q.state = state

    //根据当前的筛选条件，重新获取并渲染数据
    initTable()
  })

  //4.分页功能
  var laypage = layui.laypage
  function renderPage(total) {
    laypage.render({
      elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: q.pagesize, //每页显示的几条数据
      curr: q.pagenum, //默认选中的分页
      jump: function (obj, first) {
        //把获取的最新页码赋值给q
        q.pagenum = obj.curr
        //把最新的每页几条赋值给q
        q.pagesize = obj.limit
        //如果first是true，代表首次渲染分页结果，调用了jump
        //如果是flase不是首次渲染分页结构，是用户自己点击页码切换的
        if (!first) {
          initTable()
        }
      },
      layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
      limits: [1, 2, 3, 5, 10],
    })
  }

  //删除功能
  $('tbody').on('click', '.btn-delete', function () {
    let length = $('.btn-delete').length
    //获取到当前点击的这条数据ID
    let id = $(this).attr('data-id')
    layui.layer.confirm(
      '真的删除这条内容吗？',
      { icon: 3, title: '提示' },
      function (index) {
        $.ajax({
          method: 'GET',
          url: `/my/article/delete/${id}`,
          success: function (res) {
            if (res.status !== 0) return layer.msg(res.message)

            layer.msg(res.message)

            //当删除完数据后，判断当前这页是否还有剩余的数据
            //如果没用，让页码值-1
            if (length === 1) {
              q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
            }
            //重新渲染列表内容
            initTable()
          },
        })

        layer.close(index)
      }
    )
  })
})
